
<!-- 首页横屏 -- 组件 -->
<template>
  <div class="main-box">
    <div class="circle" data-splitting>LESS IS MORE</div>
    <img
      class="globe"
      src="https://purepng.com/public/uploads/large/purepng.com-earthearthplanetglobethird-planet-from-the-sun-1411526987961jvz5u.png"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },

  mounted() {
    //测试
    this.init();
  },
  methods: {
    init() {
      const circle = document.querySelector(".circle");

      if (circle) {
        const text = circle.innerHTML;
        circle.innerHTML = "";
        circle.style.setProperty("--numchs", text.length);

        for (let i = 0; i < text.length; i++) {
          circle.innerHTML =
            circle.innerHTML +
            '<div class="char" style="--char-index: ' +
            i +
            ';">' +
            text.charAt(i) +
            "</div>";
        }
      }
    },
  },
};
</script>
<style >
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: monospace;
}

@import url("https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap");

.main-box {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: black;
  transform-style: preserve-3d;
  font-family: "Black Han Sans", sans-serif;
}

.main-box:after {
  content: "";
  background: url("https://i0.wp.com/texturefabrik.com/wp-content/uploads/2020/09/texturefabrik-photocopy_5_06.jpg");
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 2;
  mix-blend-mode: screen;
  opacity: 0.4;
}

.circle {
  transform-style: preserve-3d;
  animation: animate 6s linear infinite;
  --deg: calc(360deg / var(--numchs));
  z-index: 1;
}

@keyframes animate {
  0% {
    transform: perspective(1000px) rotateY(360deg) rotateX(15deg);
  }

  100% {
    transform: perspective(1000px) rotateY(0deg) rotateX(15deg);
  }
}

.circle .char {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  font-size: 4em;
  text-transform: uppercase;
  padding: 5px 12px;
  transform-style: preserve-3d;
  transform-origin: center;
  transform: rotateY(calc(var(--char-index) * var(--deg))) translateZ(250px);
  font-family: "Black Han Sans", sans-serif;
}

.globe {
  position: absolute;
  width: 300px;
  height: 300px;
  z-index: 0;
  filter: grayscale(1);
}
</style>
